<template>
  <div>
    <template v-for="list in menuList">
      <el-submenu style="padding-left: 0px"
        v-if="list.children.length > 0" :key="list.menu_name" :index="list.menu_name">
        <template slot="title">
          <!-- <i :class="list.icon" :style="'color:'+color"></i> -->
          <i >·</i> 
          <span slot="title">{{ list.menu_name}}</span>
        </template>
        <Menu v-if="list.children.length" :menuList="list.children"></Menu>
      </el-submenu>
      <el-menu-item v-else :index="list.menu_index" :key="list.menu_name" @click="menuClick(list)" class="routerLink">
        <i >·</i>
        <span>{{ list.menu_name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
  export default {
    name:'Menu',//模板名称
    data() {
      return {
        color:''
      }
    },
    props:['menuList'],
    watch:{},
    created(){
      // console.log(this.menuList);
    },
    mounted(){
      // this.color = localStorage.UserThemeColor;
    },
    methods:{
      menuClick(data){
        this.$router.push({name:data.menu_url,query:{code:data.menu_code}})
      }
    }
  }
</script>
<style>
.routerLink{
  display: inline-block;
  width: 100%;
  height: 100%;
}
</style>